<template>
    <div class="fivebox">
        <div class="index_part_title">
            <span> <i class="el-icon-s-custom"></i>会员趋势分析</span>
            <i class="el-icon-refresh refresh"
                @click="refresh"></i>
        </div>
        <div class="index_five" @click="$router.push('/index/user')">
            <div style="width:100%;height:100%;"
                id="indexfive">

            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {};
    },
    props: {
        data: {
            type: Object,
            default: () => ({})
        }
    },
    mounted () {
        // var that = this;
        // this.$nextTick(() => {
        //     that.get_count();
        // });
    },
    components: {},
    methods: {
        refresh () {
            this.$bus.$emit("refresh", "user");
        },
        get_count () {
            var option = {
                title: {
                    text: "",
                    textStyle: {
                        align: "center",
                        color: "#8d949a",
                        fontSize: 20
                    },
                    top: "0%",
                    left: "5%"
                },
                backgroundColor: "#fff",
                grid: {
                    top: "5%",
                    left: "8%",
                    right: "8%",
                    bottom: "20%"
                },
                tooltip: {
                    trigger: "axis"
                },
                legend: {
                    color: ["#f3545d", "#fdaf4b", "#177dff"],
                    data: ["新增总会员", "新增会员用户"],
                    bottom: "5%",
                    textStyle: {
                        color: "#8d949a"
                    }
                },
                xAxis: {
                    data: this.data.date, //H24(),
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#8d949a" //X轴文字颜色
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#acacac"
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#ddd6d0"
                        },
                        interval: 0
                    },
                    boundaryGap: false
                },
                yAxis: [
                    {
                        type: "value",
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#acacac"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#acacac"
                            }
                        }
                    },
                    {
                        position: "left",
                        type: "value",
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        name: "新增总会员",
                        type: "line",
                        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                        smooth: true, //平滑曲线显示
                        showAllSymbol: true, //显示所有图形。
                        symbol: "circle", //标记的图形为实心圆
                        symbolSize: 10, //标记的大小
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#f3545d" //
                        },
                        data: this.data.all
                    },
                    {
                        name: "新增会员用户",
                        type: "line",
                        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                        smooth: true, //平滑曲线显示
                        showAllSymbol: true, //显示所有图形。
                        symbol: "circle", //标记的图形为实心圆
                        symbolSize: 10, //标记的大小
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#fdaf4b" //
                        },
                        data: this.data.vip
                    }
                ]
            };

            var myChart = this.$echarts.init(document.getElementById("indexfive"));
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    }
};
</script>
<style lang="less" scoped>
.fivebox {
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 5px 20px #e4e4e4;
}

.index_five {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
